<template>
  <view class="RankList">
    <view class="rank">
      <view class="ranking_list" v-for="item in RankList" :key="item.id" @click="navigatorToDetail(item.id)"><image :src="item.coverImgUrl" mode="widthFix"></image>
       <text class="hhh iconfont icon-dkw_bofang">{{item.playCount>100000000?(item.playCount / 100000000).toFixed(2) + '亿':(item.playCount / 10000).toFixed(1) + '万'}}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      RankList: []
    }
  },
  onLoad() {
    this.getRankingList()
  },
  methods: {
    async getRankingList() {
      const { data: res } = await uni.$http.get('toplist')
      // console.log(res)
      if (res.code !== 200) return uni.$showMsg('排行榜列表获取失败')
      this.RankList = res.list
    },
    navigatorToDetail(id){
      uni.navigateTo({
         url:'/subpkg/songs_list_detail/songs_list_detail?id='+id
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.rank {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.ranking_list {
  display: flex;
  flex: 2;
  margin: 20rpx;
}
.ranking_list image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 20rpx;
}
.hhh{
  position: absolute;
  background: rgba(36, 36, 36 ,0.3);
  // right: 2%;
  // top: 2%;
  color: white;
  border-radius: 20rpx;
  font-size: 25rpx;
  padding: 8rpx;
}
</style>
